<template>
    <div class="main">
        <div class="head">
            <div class="head-left">
                <img class="logo" src="@/assets/logo.gif" alt="">
                <p>日照市智慧数据可视化平台 </p>
                <img class="head-b" src="@/assets/7f393add73d1bdf956.png" alt="">
            </div>
            <div class="selectItem">
                <el-carousel type="card" height="22px" :autoplay="false" indicator-position="none" arrow="never">
                    <el-carousel-item v-for="(i, o) in tabList" :key="o">
                        <div class="tab-item" @click="changeItem(o)">
                            <img class="tab-item-bg1" src="@/assets/sad2402DDC723.gif" alt="">
                            <p>{{ i.name }}</p>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="date">
                <p>{{ date }}</p>
            </div>
            <div class="head-bs-i" @click="screenfullChange">
                <img v-if="!screenfullType" src="@/assets/q1.png" alt="">
                <img v-else src="@/assets/q2.png" alt="">
                {{ screenfullType ? '收起' : '全屏' }}
            </div>
        </div>
        <div class="mosk"> </div>
        <div class="mainV">
            <div class="ml">
                <ML1 class="mli" :dIndex="dateRangeIndex" :hIndex="tabHospitalIndex" />
                <ML2 class="mli" :dIndex="dateRangeIndex" :hIndex="tabHospitalIndex" />
                <ML3 class="mli" :dIndex="dateRangeIndex" :hIndex="tabHospitalIndex" />
            </div>
            <div class="mc">
                <div class="dateRange">
                    <div :class="['dateRangei', dateRangeIndex == o ? 'dateRangeiA' : '']"
                        v-for="(i, o) in dateRangeList" :key="o" @click="dateRangeIndex = o">{{ i }}
                    </div>
                </div>
                <MC1 class="mci" :dIndex="dateRangeIndex" :hIndex="tabHospitalIndex" />
                <MC2 class="mci" @changeMcIndex="changeMcIndex" :mIndex="mIndex" :dIndex="dateRangeIndex" :hIndex="tabHospitalIndex" />
                <MC3 class="mci" :mIndex="mIndex" :dIndex="dateRangeIndex" :hIndex="tabHospitalIndex" />
            </div>
            <div class="mr">
                <MR1 class="mri" />
                <MR2 class="mri" />
            </div>
        </div>
    </div>
</template>

<script>
import screenfull from "screenfull";
import ML1 from "./components/ml1";
import ML2 from "./components/ml2";
import ML3 from "./components/ml3";
import MC1 from "./components/mc1";
import MC2 from "./components/mc2";
import MC3 from "./components/mc3";
import MR1 from "./components/mr1";
import MR2 from "./components/mr2";
export default {
    components: { ML1, ML2, ML3, MC1, MC2, MC3, MR1, MR2 },
    data() {
        return {
            date: this.$Moment().format('YYYY-MM-DD HH:mm:ss'),
            screenfullType: false,
            dateFun: null,
            tabList: [
                { name: '市人民医院' },
                { name: '市妇幼保健院' },
                { name: '港口医院' },
                { name: '市中心医院' },
            ],
            tabHospitalIndex: 0,
            dateRangeList: ['本日', '本月', '本年'],
            dateRangeIndex: 0,
            mIndex: 0,
        }
    },
    created() {
        this.getDate();
    },
    mounted() {
    },
    methods: {
        changeMcIndex(index) {
            this.mIndex = index;
        },
        changeItem(o) {
            this.tabHospitalIndex = o
        },
        screenfullChange() {
            if (screenfull.isEnabled) {
                this.screenfullType = !this.screenfullType
                screenfull.toggle();
            }
        },
        getDate() {
            const that = this
            that.dateFun = setInterval(() => {
                that.date = that.$Moment().format('YYYY-MM-DD  HH:mm:ss')
            }, 1000)
        }
    },
    beforeDestroy() {
        clearInterval(this.dateFun)
        this.dateFun = null
    }
}
</script>
<style lang="scss" scoped>
.main {
    user-select: none;
    min-width: 1920px;
    min-height: 1080px;
    position: relative;
    height: 100%;
    background-image: url('../assets/mbg3.jpg');
    background-size: 100% 100%;

    .mosk {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-color: #2a2d3cee;
    }

    .mainV {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        z-index: 3;
        display: flex;
        justify-content: space-around;

        .ml,
        .mc,
        .mr {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            position: relative;
            height: 100%;
        }

        .dateRange {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right:  20px;
            top: 30px;
            border-radius: 12px;
            overflow: hidden;
            background-color: #35394b;
            width: 180px;
            height: 30px;
            box-shadow: 0 4px 8px 0 #00000099, 0 6px 20px 0 #00000099;
            z-index: 4;

            .dateRangei {
                width: 60px;
                text-align: center;
                color: #aaa;
                cursor: pointer;
                height: 30px;
                line-height: 30px;
                transition: all 1s;
                font-family: PMZD;
                font-size: 20px;
                background-color: transparent;
                text-shadow: 0 0 5px #000;
            }

            .dateRangeiA {
                color: #fff;
                background: linear-gradient(to right, #d5628a, #9769d3);
            }
        }
    }

    .head {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        height: 65px;
        background-image: url('../assets/h1.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .head-left {
            height: 50px;
            display: flex;
            align-items: center;
            margin-left: 100px;
            position: relative;

            .head-b {
                position: absolute;
                z-index: 3;
                left: 625px;
                bottom: -24px;
                width: 40px;
            }

            .logo {
                width: 40px;
                height: 40px;
                position: absolute;
                left: -80px;
                margin-right: 30px;
                z-index: 3;
            }

            p {
                position: relative;
                font-family: 'YSBTH';
                text-shadow: 0px 0px 6px #000;
                color: #FFFFFF;
                font-size: 42px;
                z-index: 3;
                width: 750px;
                background-image: url('../assets/h2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;

                .head-titlebg {
                    position: absolute;
                    z-index: -1;
                    width: 478px;
                    height: 359px;
                    right: -9px;
                    opacity: .3;
                    bottom: -165px;
                }
            }

        }

        .date {
            height: 54px;
            position: absolute;
            width: 346px;
            right: 160px;
            top: 5px;

            p {
                position: relative;
                z-index: 3;
                width: 100%;
                color: #FFFFFF;
                text-align: center;
                font-size: 26px;
                line-height: 54px;
                font-family: 'YSBTH';

            }

            img {
                width: 100%;
                z-index: 2;
                height: 36px;
                position: absolute;
                top: 10px;
                left: 0;
                opacity: .5;
            }
        }

        .head-bs-i {
            position: absolute;
            z-index: 4;
            cursor: pointer;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            color: #fff;
            height: 26px;
            font-size: 12px;
            background: linear-gradient(to right, #d5628a, #9769d3);
            text-shadow: 0 0 8px #000;
            box-shadow: 0 0 8px #000;
            background-size: 100% 100%;
            transition: all .6s;
            margin: 0 10px;
            cursor: pointer;
            border-radius: 12px;
            &:hover {
                box-shadow: 0 0 8px #cccccc66;
                text-shadow: 0 0 8px #888;
            }

            img {
                width: 15px;
                margin-right: 5px;
            }
        }
    }
}

.selectItem {
    width: 400px;
    position: absolute;
    left: 860px;
    top: 10px;
    z-index: 8;

    .tab-item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 140px;
        height: 40px;
        cursor: pointer;

        p {
            position: relative;
            z-index: 10;
            color: #EFFBFF88;
            font-family: 'SJYHJT';
            font-size: 18px;
        }

        .tab-item-bg {
            display: none;
        }

        .tab-item-bg1 {
            display: none;
        }



    }

    /deep/.el-carousel__container {
        height: 40px !important;
    }

    /deep/.el-carousel__mask {
        display: none;
    }

    /deep/.el-carousel__item {
        width: 140px;
    }

    /deep/.el-carousel__item.is-active {

        p {
            color: #DAEDFF;
            background: linear-gradient(180deg, #FFFEFE 18%, #a1c6e9 69%, #EFFBFF 81%);
            font-size: 22px;
            font-family: 'PMZD';
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        .tab-item-bg1 {
            position: absolute;
            display: block;
            left: -2px;
            width: 140px;
            height: 58px;
            z-index: 10;
        }
    }

}
</style>